<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>云盘列表</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="../../css/mui.min.css" />
		<link rel="stylesheet" href="../../css/index.css" />
		<link rel="stylesheet" href="../../css/minirefresh.css" />
	</head>

	<style>
		/*进入样式*/
		
		.addSubject {
			font-size: 15px;
		}
		
		.mui-bar-nav.mui-bar .mui-icon {
			line-height: 30px;
		}
		
		.title-out {
			height: 50px;
			margin-top: 6px;
			position: fixed;
			z-index: 11;
			background: #fff;
			width: 100%;
			top: 44px;
			border-bottom: 1px solid #e6e6e6;
		}
		
		.mui-content {
			background-color: #fff;
		}
		
		.mui-table-view-cell {
			padding: 14px 15px;
		}
		
		.list-img {
			width: 33px;
		}
		
		.list-title {
			font-size: 16px;
			color: #333;
		}
		
		.list-detail {
			float: left;
		}
		
		.list-time {
			font-size: 12px;
			color: #999;
		}
		
		.list-detail-img {
			line-height: 35px
		}
		
		.list-detail-font {
			width: 80%;
			margin-left: 12px;
		}
		
		.mui-table-view-cell:after {
			background-color: #e6e6e6;
		}
		
		.mui-table-view:before,
		.mui-table-view:after {
			background-color: #e6e6e6;
			height: 1px;
		}
		/*小圆圈*/
		
		.circle {
			position: absolute;
			right: 18px;
			top: 30px;
			background: #fff;
			border: 1px solid #ccc;
			border-radius: 20px;
			padding: 5px;
			height: 5px;
			width: 5px;
		}
		
		.table {
			margin-top: 100px;
		}
		
		.mui-table-view:before {
			height: 0px !important;
		}
		
		#promptBtn {
			margin-left: 10px;
		}
		
		.title-img {
			width: 30px;
			margin-top: 10px;
			padding: 4px;
		}
		
		.mui-plus .plus {
			display: inline;
		}
		
		.plus {
			display: none;
		}
		
		#topPopover {
			position: fixed;
			top: 16px;
			right: 6px;
		}
		
		#topPopover .mui-popover-arrow {
			left: auto;
			right: 6px;
		}
		
		.mui-popover-arrow:after {
			background-color: #343b43;
		}
		
		#middlePopover .mui-popover-arrow {
			left: 80px !important;
		}
		
		.groupli p {
			color: #fff;
		}
		
		#middlePopover .mui-table-view-cell:after {
			background-color: #343b43 !important;
			width: 100%;
			left: 0;
		}
		/*群组*/
		
		.groupstyle {
			float: right;
			height: 50px;
			line-height: 50px;
			margin-right: 10px;
			font-size: 14px;
			width: 29%;
			text-align: right;
			display: block;
		}
		
		.w80 {
			width: 90%;
			display: block;
			height: 20px;
			overflow: hidden;
		}
		/*勾*/
		
		.condition {
			position: absolute;
			top: 10px;
			right: 10px;
		}
		/*群显示箭头*/
		
		.mui-popover-arrow {
			left: 25.5px !important;
		}
		
		#middlePopover {
			margin-top: 15px;
			left: auto !important;
			right: 0 !important;
			font-size: 14px;
		}
		
		.mui-table-view {
			overflow: auto;
		}
		
		.mui-popover {
			min-height: 45px !important;
			/*错乱去除height此处*/
			height: auto !important;
			width: auto;
			border-radius: 3px;
		}
		
		span.mui-icon {
			font-size: 14px;
			color: #007aff;
			margin-left: -15px;
			padding-right: 10px;
		}
		
		#middlePopover .mui-table-view-cell {
			padding: 11px 15px;
		}
		
		#middlePopover .mui-table-view-cell:after {
			right: 15px;
			background-color: #343b43;
		}
		
		#middlePopover .mui-table-view,
		#middlePopover {
			background-color: #43484e !important;
			color: #fff;
		}
		
		.mui-popover .mui-popover-arrow:after {
			background-color: #43484e;
		}
		/*右侧群组显示*/
		
		.mui-popover .mui-scroll-wrapper {
			margin: 2px 0;
			overflow: initial;
		}
		
		#middlePopover .mui-active {
			background-color: #343b43;
		}
		
		input::-webkit-input-placeholder {
			font-size: 16px;
			color: #999;
			line-height: 20px;
		}
		
		input::-moz-placeholder {
			font-size: 16px;
			color: #999;
			background-color: #f2f2f2;
			padding: 20px 0;
		}
		
		input::-moz-placeholder {
			font-size: 16px;
			color: #999;
			background-color: #f2f2f2;
			padding: 20px 0;
		}
		
		input::-ms-input-placeholder {
			font-size: 16px;
			color: #999;
			background-color: #f2f2f2;
			padding: 20px 0;
		}
		/*新建文件夹 start*/
		
		.mui-popup {
			border-radius: 3px;
			width: 300px;
			background-color: #fff;
		}
		
		.mui-popup-inner {
			border-radius: 1px 1px 0 0;
		}
		
		.mui-popup-button:first-child {
			border-radius: 0 0 0 3px;
		}
		
		.mui-popup-button:last-child {
			border-radius: 0 0 3px;
			color: #0888D0;
		}
		
		.mui-popup-title {
			padding: 10px;
			font-size: 20px;
			color: #333;
		}
		
		.mui-popup-button {
			font-size: 16px;
			color: #666;
			font-weight: 100 !important;
			width: 50%;
			float: left;
		}
		
		.mui-popup-button-bold {
			color: #0487d0;
		}
		
		.mui-popup-inner:after {
			background-color: #E6E6E6;
		}
		
		.mui-popup-input input {
			border: none;
			margin: 15px 0;
			border-radius: 3px;
			padding: 20px 5px;
			border: 1px solid #f2f2f2;
			margin-top: 8px;
			background-color: #f2f2f2;
		}
		
		.mui-popup-buttons {
			height: auto;
		}
		/*新建文件夹end*/
		
		.mui-icon-checkmarkempty {
			background: #0487d0 !important;
			padding: 0px !important;
			width: auto;
			height: auto;
			font-size: 16px;
			color: #fff;
			border: none;
		}
		
		.mui-bar-nav~.mui-content .mui-pull-top-pocket {
			top: 100px;
		}
		/*文件上传start*/
		
		.op {
			width: 25%;
			float: left;
			margin: 10px 0;
		}
		
		.op-img {
			height: 50px;
			width: 50px;
			margin-bottom: 10px;
		}
		
		.op-font {
			font-size: 14px;
			font-weight: normal;
			color: #666666;
		}
		/*文件上传end*/
		/*分享*/
		
		.mui-popover.mui-popover-action .mui-table-view {
			margin: 0;
		}
		
		.mui-popover {
			height: auto;
		}
		
		.mui-popover.mui-popover-action .mui-table-view {
			border-radius: inherit;
		}
		
		.mui-popover.mui-popover-action .mui-table-view .mui-table-view-cell:after {
			background-color: #fff;
		}
		
		.op {
			width: 33%;
		}
		/*footer*/
		
		.footer {
			width: 100%;
			height: 50px;
			z-index: 11;
			position: absolute;
			bottom: 0px;
			background-color: #333;
			display: none;
			color: #fff;
			font-size: 12px;
			text-align: center;
		}
		
		.footer-img-out {
			position: initial;
			bottom: 0;
			text-align: center;
			float: left;
			width: 33.3%;
			padding-top: 4px;
			margin-left: 0 !important;
		}
		
		.mui-icon-checkmarkempty {
			background: #0487d0 !important;
			padding: 0px !important;
			width: auto;
			height: auto;
			font-size: 16px;
			color: #fff;
			border: none;
		}
		
		.footer-img {
			width: 18px;
			margin-left: 3px;
		}
		
		.footer-font {
			margin-top: 1px;
			display: inline-block;
			color: #fff;
		}
		
		.disabled {
			pointer-events: none;
		}
		
		.mui-popover .mui-popover-arrow.mui-menu-popver.mui-bottom:after {
			top: 17px;
			left: 0;
		}
		
		#middlePopover {
			margin-top: -13px;
			left: 220px !important;
			font-size: 14px;
			height: 150px;
		}
		
		.tip {
			color: #999999 !important;
		}
		
		.del {
			color: #CD1010 !important;
		}
		
		.ypcancel {
			color: #3C3C3C !important;
		}
		
		.imgfile {
			z-index: -9999;
		}
		
		.minirefresh-scroll {
			margin-top: 55px;
			background: transparent;
		}
		/*隐藏点击滚动顶端按钮*/
		
		.minirefresh-totop {
			display: none;
		}
		
		.minirefresh-theme-default .minirefresh-downwrap {
			top: 116px
		}
		
		.minirefresh-upwrap {
			background: #F2F2F2;
		}
		
		.mui-backdrop {
			background-color: rgba(0, 0, 0, .2);
		}
		
		.banwz{
			position: absolute;
		    top: 14px;
		    right: 40px;
		}
	</style>

	<body>

		<div class="cloud">
			<!-- 主页面标题 -->
			<header class="mui-bar mui-bar-nav">
				<a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left menus" id="menus" href="#offCanvasSide"></a>
				<span class="mui-icon mui-icon-back mui-pull-left backs" style="display: none;"></span>
				<h1 class="mui-title hone" style="width: 68%;text-align: center; padding-left: 12%;" v-text="headName"></h1>
				<a class="mui-icon mui-action-menu mui-pull-right" id="recentFiles" href="javascript:void(0)"><span class="addSubject">最近文档</span></a>
			</header>

			<div class="title-out">

				<img id='promptBtn' class="title-img" data-id="1" src="../../icon/gcyp1.png" />
				<a href="#c_upload">
					<img class="title-img" data-id="2" src="../../icon/gcyp2.png" />
				</a>
				<!--<img class="title-img" data-id="3" src="../../icon/gcyp3.png" />-->
				<!--<a href="#middlePopover">
							<img class="title-img" data-id="4" src="../../icon/gcyp4.png" />
						</a>-->
				<img class="title-img" data-id="5" src="../../icon/gcyp5.png" />
				<a href="#middlePopover" class="groupstyle hone">默认群组</a>
			</div>

			<!-- 主页面内容容器 -->
			<div id="home_scroll" class="minirefresh-wrap">
				<div class="minirefresh-scroll" id="list">
					<ul class="mui-table-view table" id="tableList">
						<div v-cloak v-for="(item,index) in list" style="position: relative;">
							<li class="mui-table-view-cell files" :fileSize="item.fileSize" :fileId="item.fileId" :isDrawing="item.isDrawing" :fileType="item.fileType" :fileName="item.fileName">
								<div class="list-detail list-detail-img">
									<img class="list-img" :src="item | format">
								</div>
								<div class="list-detail list-detail-font">
									<p class="list-title hone" style="width: 80%;">{{item.fileName | changeName}}</p>
									<small v-show="item.fileType==2" class="ban banwz" :class="{kai:k1,'zheng':z1}">版本{{item.fileVersion}}</small>
									<p class="list-time">{{item.fileCreateTime | switchingTime}}</p>
								</div>

							</li>
							<div class="circle" :fileSize="item.fileSize" :fileId="item.fileId" :fileType="item.fileType" :fileName="item.fileName"></div>
						</div>

					</ul>
				</div>
			</div>

			<div class="footer">
				<div class="footer-img-out" id="downloads">
					<img class="footer-img" src="../../icon/gcyp_ss1.png" />
					<br />
					<span class="footer-font">下载</span>
				</div>

				<div class="footer-img-out">
					<a href="#share">
						<img class="footer-img" src="../../icon/gcyp_ss2.png" />
						<br />
						<span class="footer-font">分享</span>
					</a>
				</div>

				<div class="footer-img-out">
					<a href="#delete">
						<img class="footer-img" src="../../icon/gcyp_ss3.png" />
						<br />
						<span class="footer-font">删除</span>
					</a>
				</div>

				<!--<div class="footer-img-out" id='promptBtn'>
					<img class="footer-img" src="../../icon/gcyp_ss4.png" />
					<br />
					<span class="footer-font">重命名</span>
				</div>

				<div class="footer-img-out">
					<img class="footer-img" src="../../icon/gcyp_ss5.png" />
					<br />
					<span class="footer-font">更多</span>
				</div>-->

			</div>
		</div>

		<div id="c_upload" class="mui-popover mui-popover-action mui-popover-bottom" style="height: 230px;">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell" id="nfiles">

					<div class="op" data-id="1">
						<img class="op-img" src="../../icon/gcyp_sc1.png" />
						<p class="op-font">上传文档</p>
						<input class="textfile dnone" type="file" @change="tirggerFile($event)" value="上传text" accept="text/*">
					</div>

					<div class="op" data-id="2">
						<img class="op-img" src="../../icon/gcyp_sc2.png" />
						<p class="op-font">上传图片</p>
						<input class="imgfile dnone" type="file" @change="tirggerFile($event)" accept="image/*">
					</div>

				    <div class="op" data-id="3">
						<img class="op-img" src="../../icon/gcyp_sc3.png" />
						<p class="op-font">上传音频</p>
						<input class="audiofile dnone" type="file" @change="tirggerFile($event)" value="上传audio" accept="audio/*">
					</div>

					<div class="op" data-id="4">
						<img class="op-img" src="../../icon/gcyp_sc4.png" />
						<p class="op-font">上传视频</p>
						<input class="videofile dnone" type="file" @change="tirggerFile($event)" value="上传video" accept="video/*">
					</div>

					<div class="op" data-id="5">
						<img class="op-img" src="../../icon/gcyp_sc5.png" />
						<p class="op-font">上传其他文件</p>
						<input class="allfile dnone" type="file" @change="tirggerFile($event)" value="上传全部类型" accept="*/*">
					</div>

				</li>
			</ul>
		</div>

		<!--分享选项-->
		<div id="share" class="mui-popover mui-popover-action mui-popover-bottom">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<div class="op ops" data-id="1">
						<img class="op-img" src="../../icon/gcyp_fx2.png" />
						<br />
						<span class="op-font">用户中转站</span>
					</div>
					<div class="op ops" data-id="2">
						<img class="op-img" src="../../icon/gcyp_fx3.png" />
						<br />
						<span class="op-font">密钥分享</span>
					</div>
					<div class="op ops" data-id="3">
						<img class="op-img" src="../../icon/gcyp_fx1.png" />
						<br />
						<span class="op-font">公共分享</span>
					</div>
				</li>
				<li class="mui-table-view-cell btf2">
					<a href="#share" style="color: #333;">取消</a>
				</li>
			</ul>
		</div>

		<!--删除选项-->
		<div id="delete" class="mui-popover mui-popover-action mui-popover-bottom" style="background-color: #F2F2F2;">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="javascript:void(0)" class="tip">删除后，该文件夹或文件将永久删除！</a>
				</li>
				<li class="mui-table-view-cell dels">
					<a href="#delete" class="del">删除</a>
				</li>
			</ul>
			<ul class="mui-table-view" style="margin-top: 5px;">
				<li class="mui-table-view-cell">
					<a href="#delete" class="ypcancel">取消</a>
				</li>
			</ul>
		</div>

		<!--中间弹出菜单-->
		<div id="middlePopover" class="mui-popover groupmenu">
			<div class="mui-popover-arrow mui-menu-popver"></div>
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell groupli" v-for="groups in group" :groupId="groups.groupId">
							<p><span class="w80 hone">{{groups.groupName}}</span><span v-show="groupId == groups.groupId" class="condition">✓</span></p>
						</li>
					</ul>
				</div>
			</div>
		</div>

		<!--新建文件夹 mui-popup-in-->
		<div id="insert" class="mui-popup">
			<div class="mui-popup-inner">
				<div class="mui-popup-title">新建文件夹</div>
				<div class="mui-popup-text"> </div>
				<div class="mui-popup-input">
					<input class="iadd" type="text" placeholder="新建文件夹">
				</div>
			</div>
			<div class="mui-popup-buttons">
				<span class="mui-popup-button cancel">取消</span>
				<span class="mui-popup-button yes">确定</span>
			</div>
		</div>
		<!--新建时展开背景 mui-active,display:block触发-->
		<div class="mui-popup-backdrop mui-active addpop" style="display: none;"></div>

		<script type="text/javascript" src="../../js/minirefresh.js"></script>
		<script src="../../js/mui.min.js"></script>
		<script type="text/javascript" src="../../js/vue2.5.js"></script>
		<script type="text/javascript" src="../../js/jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="../../js/globalVariable.js"></script>
		<script type="text/javascript" src="../../components/attachIcon.js"></script>
		<script type="text/javascript" src="../../js/pub.js"></script>
		<script type="text/javascript" src="../../js/cloud_project_list.js" ></script>
		<script type="text/javascript" src="../../js/mask.js"></script>
		<script type="text/javascript">
			
		</script>
	</body>

</html>